<template>
  <!-- 员工实名认证审核 -->
  <!-- 时间选择 -->
  <div id="yuanGong">
    <div style="display: flex">
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
      </div>

      <!-- 选择查询 -->
      <div class="selecForm">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-select v-model="formInline.status" placeholder="请选择状态">
              <el-option label="通过" value="通过" />
              <el-option label="不通过" value="不通过" />
              <el-option label="未审核" value="未审核" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formInline.userId"
              placeholder="申请人编号"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 申请人列表 -->
    <div>
      <el-table
        v-loading="loading"
        :data="tableData1"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="data" label="序号" type="index" align="center" />
        <el-table-column prop="userId" label="申请人编号" align="center" />
        <el-table-column prop="realname" label="姓名" align="center" />
        <el-table-column
          prop="applyTime"
          :formatter="dateFormat"
          label="申请时间"
          align="center"
          width="140"
        />
        <el-table-column prop="idCard" label="身份证号" align="center" />
        <el-table-column label="身份证正面" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 30px; height: 30px"
              :src="scope.row.idcardPhotoPositive"
              :preview-src-list="[scope.row.idcardPhotoPositive]"
            />
          </template>
          <!-- <el-popover
              placement="top-start"
              title="标题"
              width="200"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
            </el-popover> -->
        </el-table-column>
        <el-table-column label="身份证反面" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 30px; height: 30px"
              :src="scope.row.idcardPhotoNegative"
              :preview-src-list="[scope.row.idcardPhotoNegative]"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="bankCard"
          label="银行卡号"
          align="center"
          width="150"
        />
        <el-table-column label="银行卡" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 30px; height: 30px"
              :src="scope.row.bankCardPhoto"
              :preview-src-list="[scope.row.bankCardPhoto]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <!-- <el-button type="success" plain style="width: 40px">通过</el-button> -->
          <template slot-scope="scope">
            <span
              v-if="scope.row.status === '通过'"
              class="el-tag el-tag--success el-tag--mini el-tag--light"
            >通过</span>
            <span
              v-else-if="scope.row.status === '不通过'"
              class="el-tag el-tag--danger el-tag--mini el-tag--light"
            >不通过</span>
            <span
              v-else
              class="el-tag el-tag--info el-tag--mini el-tag--light"
            >未审核</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template v-if="scope.row.status === '未审核'" slot-scope="scope">
            <!-- scope.row代表这一行的数据 -->
            <el-button
              type="text"
              size="small"
              style="color: #3a71a8"
              @click="handleClick(scope.row)"
            >通过</el-button>
            <el-button
              type="text"
              size="small"
              style="color: #e65d6e"
              @click="handleClick1(scope.row)"
            >不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="float: right">
      <el-pagination
        :page-sizes="[20, 10, 5]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import '@/styles/AccountApp.css'
import moment from 'moment'
// import axios from "axios";
import {
  pageQuery,
  checkPass,
  checkNoPass,
  revokeCertificationApply
} from '@/api/certification'
// 重命名
import { pageQuery as pageQueryPro, saveOrUpdate } from '@/api/certification'
import data from '../../../views/pdf/content'
// import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      loading: false,
      tableData1: [],

      params: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: '',
      formInline: {
        userId: '',
        status: ''
      },
      tableData2: [],
      atbleDate3: [],
      id: '',
      isshow: true
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.queryCategoryData()
    this.queryData()
    // this.handleClick(a);
  },
  methods: {
    async handleClick(a) {
      this.loading = true
      await checkPass({ id: a.id })

      const res = await pageQuery({ page: 1, pageSize: 100 })
      this.tableData1 = res.data.list
      this.loading = false
      // this.queryCategoryData();
    },
    async handleClick1(a) {
      this.loading = true
      // let res1 = await pageQuery({ page: 1, pageSize: 10 });
      await checkNoPass({ id: a.id })

      // this.queryData();
      const res = await pageQuery({ page: 1, pageSize: 100 })
      this.tableData1 = res.data.list
      this.loading = false
      // this.tableData1 = res1.data.list;
    },
    async onSubmit() {
      this.loading = true
      const res = await pageQuery({ page: 1, pageSize: 100 })
      this.tableData1 = res.data.list
      for (const key in this.tableData1) {
        if (this.formInline.userId == '') {
          if (this.tableData1[key].status == this.formInline.status) {
          } else {
            delete this.tableData1[key]
          }
          this.tableData1 = res.data.list
        } else {
          if (this.tableData1[key].userId == this.formInline.userId) {
            if (this.tableData1[key].status != '') {
              if (this.tableData1[key].status == this.formInline.status) {
              } else {
                delete this.tableData1[key]
              }
              // this.tableData1 = res.data.list;
            }
          } else {
            delete this.tableData1[key]
          }
        }
        if (this.formInline.status == '' && this.formInline.userId == '') {
          // let temp = {
          //   ...this.params,
          //   ...this.tableData1,
          // };
          const res = await pageQuery({ page: 1, pageSize: 100 })
          this.tableData1 = res.data.list
        }
      }
      this.loading = false
    },
    async handleSizeChange(val) {
      this.params.pageSize = val
      const res = await pageQuery({ page: 1, pageSize: val })
      // this.params.page = res.data.page;
      this.tableData1 = res.data.list
    },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);

      this.params.page = val
      const res = await pageQuery({ page: val, pageSize: this.params.pageSize })
      this.tableData1 = res.data.list

      // this.queryCategoryData();
    },
    async queryCategoryData() {
      this.loading = true
      const res = await pageQuery({ page: 1, pageSize: 100 })
      this.tableData1 = res.data.list
      this.loading = false
    },

    async queryData() {
      this.loading = true
      const temp = {
        ...this.params,
        ...this.tableData1
      }
      const res = await pageQuery(temp)

      this.params.page = res.data.page
      this.params.total = res.data.total

      this.params.pageSize = res.data.pageSize
      this.loading = false
      // this.total = res.data.total;
      this.tableData1 = res.data.list
    },
    dateFormat(row, column) {
      // const date = new Date(row[column.property]);
      return moment(parseInt(row.applyTime)).format('YYYY/MM/DD hh:mm:ss')

      // 下面这张方法也行
      // return this.dianji.push(row.applyTime);
      // date.getFullYear() +
      // "-" +
      // date.getMonth() +
      // "-" +
      // date.getDate() +
      // " " +
      // date.getHours() +
      // ":" +
      // date.getMinutes() +
      // ":" +
      // date.getSeconds()
    }
  }
}
</script>
<style scoped>
</style>
